<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入echarts库 -->
    <script src="../static/js/echarts.min.js"></script>

    <style>
        #mydiv{
            width: 300px;
            height: 350px;
            float: left;
            /*margin: auto auto;*/
        }

        #count{
            width: 300px;
            height: 300px;
            float: right;
        }

        #type{
            width: 300px;
            height: 300px;
            top:350px;
        }
        #mydiv4{
            width: 500px;
            height: 400px;
            top:50px;
            /*opacity: 20%;*/
            float: right;
        }
    </style>

</head>
<body>
<div id="mydiv"></div>
<div id="count"></div>
<div id="type"></div>
<div id="mydiv4"></div>

<!-- 如果在<script></script>中直接编写JavaScript代码，并且还指定了src属性，浏览器会忽略<script></script>标签中的任何代码，优先加载src指定的外部文件 -->
<script type="text/javascript">
    //基于准备好的dom，初始化echarts
    var mycharts1=echarts.init(document.getElementById("mydiv"));
    var mycharts2=echarts.init(document.getElementById("count"));
    var mycharts3=echarts.init(document.getElementById("type"));
    var mycharts4=echarts.init(document.getElementById("mydiv4"));

    function getMovie(){
        //创建XMLHttpRequest对象
        var xhr=new XMLHttpRequest();
        //打开通道
        xhr.open("GET","/train/movie");
        //发送请求
        xhr.send();
        //注册回调函数
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if (xhr.status==200){
                    //将响应过来的数据转化为JSON格式的字符串
                    var json=JSON.parse(xhr.response);
                    // 指定图表的配置项和数据
                    var option = {
                        legend: {
                            top: 'bottom'
                        },
                        title:{
                            text:"电影语言排行榜"
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: { show: true },
                                dataView: { show: true, readOnly: false },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },
                        series: [
                            {
                                name: 'Nightingale Chart',
                                type: 'pie',
                                radius: [25, 100],
                                center: ['50%', '50%'],
                                roseType: 'area',
                                itemStyle: {
                                    borderRadius: 8
                                },
                                data: json.data
                            }
                        ]
                    };
                    //使用刚指定的配置和数据项显示图表
                    mycharts1.setOption(option);
                }
            }
        }
    }


    function getMovieCount(){
        var xhr=new XMLHttpRequest();
        xhr.open("GET","/train/MovieCount");
        xhr.send();
        xhr.onreadystatechange=function (){
            if(xhr.readyState==4 && xhr.status==200){
                //将前端响应过来的数据转化为JSON格式的JS对象
                var json=JSON.parse(xhr.response);
                var arr=json.data;
                console.log(json.data)
                //定义一个空数组
                var nameArr=[];
                var valueArr=[];
                for(var i=0;i<arr.length;i++){
                    nameArr[i]=arr[i].name;
                }

                //指定图表和配置数据项
                option = {
                    xAxis: {
                        type: 'category',
                        data: nameArr
                    },
                    title:{
                        text:"电影数量排行榜"
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data:json.data,
                            type: 'bar'
                        }
                    ]
                };
                //使用刚指定的图表
                mycharts2.setOption(option);
            }
        }
    }

    function getType(){
        var xhr=new XMLHttpRequest();
        xhr.open("GET","/train/counttype");
        xhr.send();
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4 && xhr.status==200){
                var json=JSON.parse(xhr.response);
                var arr=json.data;
                var country=[];
                var name=[];
                var countArray=[]
                console.log(country)
                for (var i=0;i<arr.length;i++){
                    country[i]=arr[i].country;
                    name[i]=arr[i].name;
                    countArray[i]=arr[i].arr
                }
                console.log(countArray);

                //指定图标的配置项
                option = {
                    title: {
                        text: 'Stacked Line'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['中国','美国','英国']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: name
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: 'Email',
                            type: 'line',
                            stack: 'Total',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: 'Union Ads',
                            type: 'line',
                            stack: 'Total',
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: 'Video Ads',
                            type: 'line',
                            stack: 'Total',
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: 'Direct',
                            type: 'line',
                            stack: 'Total',
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: 'Search Engine',
                            type: 'line',
                            stack: 'Total',
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                };
                mycharts3.setOption(option);
            }
        }
    }


    function getMydiv4(){
        var xhr=new XMLHttpRequest();
        xhr.open("GET","/train/movie4");
        xhr.send();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4 && xhr.status==200){
                var json=JSON.parse(xhr.response);
                arr=json.data;
                var name=[]
                for (var i=0;i<arr.length;i++){
                    name[i]=arr[i].name
                }
                option = {
                    title: {
                        text: '观看人数'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}'
                    },
                    toolbox: {
                        feature: {
                            dataView: { readOnly: false },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    legend: {
                        top: 20,
                        data: name
                    },
                    series: [
                        {
                            name: 'Actual',
                            type: 'funnel',
                            left: '10%',
                            width: '80%',
                            maxSize: '80%',
                            label: {
                                position: 'inside',
                                formatter: '{c}',
                                color: '#fff'
                            },
                            itemStyle: {
                                opacity: 1,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            emphasis: {
                                label: {
                                    position: 'inside',
                                    formatter: '{b}Actual: {c}'
                                }
                            },
                            data: json.data,
                            // Ensure outer shape will not be over inner shape when hover.
                            z: 100
                        }
                    ]
                };
                mycharts4.setOption(option);
            }
        }

    }

    window.onload=function(){
        getMovie();
        getMovieCount();
        getType();
        getMydiv4();
    }


</script>

</body>
</html>